<template>

  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    :show-header="false"
    size="medium"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    :row-class-name="tableRowClassName"
  >
    <el-table-column
      prop="date"
      label="唯一表示符"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="唯一名称"
      sortable
      align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      align="center"
      label="描述">
    </el-table-column>
  </el-table>


</template>

<script>

import TreeChart from "vue-tree-chart";

export default {
  components: {
    TreeChart
  },
  data() {
    return {
      tableData: [
        {
        id: 3,
        date: '012652',
        name: '苏二川',
        address: '运营中心->IT智能化部->系统开发组',
        children: [
          {
          id: 31,
          date: 'plm',
          name: '权限名称',
          address: '权限描述',
            children: [
              {
                id: 41,
                date: '2016-05-01',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                id: 42,
                date: '2016-05-01',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1519 弄'
              },
              {
                id: 41,
                date: '2016-05-01',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                id: 42,
                date: '2016-05-01',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1519 弄'
              },
              {
                id: 45,
                date: '2016-05-01',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                id: 46,
                date: '2016-05-01',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1519 弄',
                children: [
                  {
                    id: 51,
                    date: '2016-05-01',
                    name: '王小虎5',
                    address: '上海市普陀区金沙江路 1519 弄'
                  }, {
                    id: 52,
                    date: '2016-05-01',
                    name: '王小虎5',
                    address: '上海市普陀区金沙江路 1519 弄'
                  },
                  {
                    id: 51,
                    date: '2016-05-01',
                    name: '王小虎5',
                    address: '上海市普陀区金沙江路 1519 弄'
                  }, {
                    id: 54,
                    date: '2016-05-01',
                    name: '王小虎5',
                    address: '上海市普陀区金沙江路 1519 弄'
                  },
                  {
                    id: 55,
                    date: '2016-05-01',
                    name: '王小虎5',
                    address: '上海市普陀区金沙江路 1519 弄'
                  }, {
                    id: 56,
                    date: '2016-05-01',
                    name: '王小虎5',
                    address: '上海市普陀区金沙江路 1519 弄'
                  }
                ]
              }
            ]
        },
          {
          id: 32,
            date: 'ibodor',
            name: '权限名称',
          address: '上海市普陀区金沙江路 1519 弄'
        },
          {
            id: 33,
            date: 'sap',
            name: '权限名称',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 34,
            date: 'oms',
            name: '权限名称',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            id: 35,
            date: 'mom',
            name: '权限名称',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 36,
            date: 'bpm',
            name: '权限名称',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ]
      }],
    }
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (row.name == '权限名称') {
        return 'warning-row';
      }
      // else if (rowIndex === 3) {
      //   return 'success-row';
      // }
      // return '';
    }
  },

}
</script>

<style>
.el-table .warning-row {
  background: peru;
}

.el-table .success-row {
  background: rosybrown;
}


.el-table--enable-row-hover .el-table__body tr:hover>td{

  background-color: pink !important;

}

</style>
